<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物管理</title>
</head>
<body>
<div id="content">

    <div class="modal fade" id="pet-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ showing_name }}</b> 的身份信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group-sm">
                        <h6 class="text-info">名字</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="pet.name" placeholder="请输入名字">
                        <h6 class="text-info">描述</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="pet.description" placeholder="请输入描述">
                        &ensp;<h6 class="text-info">生日</h6>
                        <input type="date" class="form-control" pattern="yyyy-mm-dd" style="width: 90%;" v-model="pet.birthDate" placeholder="请输入宠物生日">
                        &ensp;<h6 class="text-info">品种</h6>
                        <select class="form-control option" v-model="pet.speciesId" style="width: 90%;">
                            <option v-for="s in species" :value="s.id">
                                {{ s.name }}
                            </option>
                        </select>

                        <h6 class="text-info">图片</h6>
                        <p>图片URL：</p>
                        <input type="text" class="form-control" id="pet_url" style="width: 90%;" v-model="pet.image" placeholder="请输入照片地址">
                        <p>本地图片：</p>
                        <label>
                            <input type="file" class="form-control" id="local_pet_image" aria-label="File browser example">
                        </label>
                        <img class="card-image-top" v-show="!image_uploaded" style="width: 100%;" :src="showing_img"/>
                        <img class="card-image-top" v-show="image_uploaded" style="width: 100%;" :src="showing_local_img"/>

                        <h6 class="text-info">价格</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="pet.price" placeholder="请输入价格">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!fields_empty & update_button_show" @Click="create">{{ update_or_create }}</button>
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="updating" @Click="deleteIt">删除</button>
                        <span class="text-danger">&emsp;{{ errorMessage }}</span>
                        <span class="text-primary">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>

    <div id="pet-data-box">
        <h3 class="text-secondary">宠物之家成员清单<button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                                                   data-toggle="modal" data-target="#pet-info" @Click="render_modal_box(-1)"><i class="fa fa-plus-square fa-2x"></i></button></h3>
        <div class="table-responsive">
            <table class="table table-light table-striped table-sm text-center">
                <thead class="thead-dark">
                <tr>
                    <th>名称</th>
                    <th>品种</th>
                    <th>价格</th>
                    <th class="text-primary">进入详情页执行操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="pet in pets" :key="pet.id">
                    <td>{{ pet.name }}</td>
                    <td>{{ pet.speciesName }}</td>
                    <td>{{ pet.price }}</td>
                    <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                data-target="#pet-info" @Click="render_modal_box(pet.id)">进入详情</button></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--search box-->
        <div class="form-inline">
            <div class="input-group-sm">
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index-1)">上一页</button>
                第{{ page_index }}页，共{{ page_num }}页
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index+1)">下一页</button>
                <kbd>To</kbd>：
                <input type="text" class="form-control" style="width: 3rem;" v-model="go">
                <button class="btn btn-link border-0 btn-info" @Click="get_paging_data(go)">Go</button>
                <kbd>检索</kbd>
                &ensp;品种&ensp;
                <input type="text" class="form-control" style="width: 6rem" v-model="pointed_species" placeholder="全部品种">
            </div>
            <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(0)">搜索</button>
            <button class="btn btn-link border-0 btn-secondary" @Click="reset_search">重置</button>
        </div>
    </div>

</div>

<div id="content2">
    <!--species info modal-->
    <div class="modal fade" id="species-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ showing_name }}</b> 物种信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group-sm">
                        <h6 class="text-info">名字</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="species.name" placeholder="请输入名字">
                        <h6 class="text-info">描述</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="species.description" placeholder="请输入描述">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!fields_empty & update_button_show" @Click="create">{{ update_or_create }}</button>
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="updating" @Click="deleteIt">删除</button>
                        <span class="text-primary">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>

    <div id="species-data-box">
        <h3 class="text-secondary">物种清单<button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                                               data-toggle="modal" data-target="#species-info"
                                               @Click="render_modal_box(-1)"><i class="fa fa-plus-square fa-2x"></i></button></h3>
        <div class="table-responsive">
            <table class="table table-light table-striped table-sm text-center">
                <thead class="thead-dark">
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                    <th class="text-primary">进入详情页执行操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="s in species" :key="s.id">
                    <td>{{ s.name }}</td>
                    <td>{{ s.description }}</td>
                    <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                data-target="#species-info" @Click="render_modal_box(s.id)">进入详情</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>